let glitch;

function changeSkin(name) {
  glitch.startGlitch = true;
  glitch.show();
  setTimeout(function () {
    glitch.changeImage(name);
  }, 200);
  setTimeout(function () {
    glitch.startGlitch = false;
    glitch.stopGlitch();
    glitch.show();
  }, 400);
}
function loadSkin(skin) {
  var sketch = function (p) {
    let windowW = 427;
    let windowH = 400;
    let isLoaded = false;
    let imgSrc = ' https://medias.games2gether.com/endless-dungeon/'+ skin + '.png';

    p.setup = function () {
      var canvas = p.createCanvas(windowW, windowH);
      canvas.parent('skin');
      p.loadImage(imgSrc, function (img) {
        glitch = new Glitch(img);
        isLoaded = true;
      });
    }

    p.draw = function () {
      p.clear();
      if (isLoaded) {
        glitch.show();
      }

    }
  }

  var myp5 = new p5(sketch);

  class Glitch {
    constructor(img) {
      this.channelLen = 4;
      this.imgOrigin = img;
      this.imgOrigin.loadPixels();
      this.copyData = [];
      this.flowLineImgs = [];
      this.shiftLineImgs = [];
      this.shiftRGBs = [];
      this.scatImgs = [];
      this.throughFlag = true;
      this.copyData = new Uint8ClampedArray(this.imgOrigin.pixels);
      this.startGlitch = false;

      // flow line
      for (let i = 0; i < 1; i++) {
        let o = {
          pixels: null,
          t1: myp5.floor(myp5.random(0, 1000)),
          speed: myp5.floor(myp5.random(4, 24)),
          randX: myp5.floor(myp5.random(24, 80))
        };
        this.flowLineImgs.push(o);
      }

      // shift line
      for (let i = 0; i < 6; i++) {
        let o = null;
        this.shiftLineImgs.push(o);
      }

      // shift RGB
      for (let i = 0; i < 1; i++) {
        let o = null;
        this.shiftRGBs.push(o);
      }

      // scat imgs
      for (let i = 0; i < 3; i++) {
        let scatImg = {
          img: null,
          x: 0,
          y: 0
        };
        this.scatImgs.push(scatImg);
      }
    }

    replaceData(destImg, srcPixels) {
      for (let y = 0; y < destImg.height; y++) {
        for (let x = 0; x < destImg.width; x++) {
          let r, g, b, a;
          let index;
          index = (y * destImg.width + x) * this.channelLen;
          r = index;
          g = index + 1;
          b = index + 2;
          a = index + 3;
          destImg.pixels[r] = srcPixels[r];
          destImg.pixels[g] = srcPixels[g];
          destImg.pixels[b] = srcPixels[b];
          destImg.pixels[a] = srcPixels[a];
        }
      }
      destImg.updatePixels();
    }

    flowLine(srcImg, obj) {

      let destPixels,
        tempY;
      destPixels = new Uint8ClampedArray(srcImg.pixels);
      obj.t1 %= srcImg.height;
      obj.t1 += obj.speed;
      tempY = myp5.floor(obj.t1);
      for (let y = 0; y < srcImg.height; y++) {
        if (tempY === y) {
          for (let x = 0; x < srcImg.width; x++) {
            let r, g, b, a;
            let index;
            index = (y * srcImg.width + x) * this.channelLen;
            r = index;
            g = index + 1;
            b = index + 2;
            a = index + 3;
            destPixels[r] = srcImg.pixels[r] + obj.randX;
            destPixels[g] = srcImg.pixels[g] + obj.randX;
            destPixels[b] = srcImg.pixels[b] + obj.randX;
            destPixels[a] = srcImg.pixels[a];
          }
        }
      }
      return destPixels;
    }

    shiftLine(srcImg) {

      let offsetX;
      let rangeMin, rangeMax;
      let destPixels;
      let rangeH;

      destPixels = new Uint8ClampedArray(srcImg.pixels);
      rangeH = srcImg.height;
      rangeMin = myp5.floor(myp5.random(0, rangeH));
      rangeMax = rangeMin + myp5.floor(myp5.random(1, rangeH - rangeMin));
      offsetX = this.channelLen * myp5.floor(myp5.random(-40, 40));

      for (let y = 0; y < srcImg.height; y++) {
        if (y > rangeMin && y < rangeMax) {
          for (let x = 0; x < srcImg.width; x++) {
            let r, g, b, a;
            let r2, g2, b2, a2;
            let index;

            index = (y * srcImg.width + x) * this.channelLen;
            r = index;
            g = index + 1;
            b = index + 2;
            a = index + 3;
            r2 = r + offsetX;
            g2 = g + offsetX;
            b2 = b + offsetX;
            destPixels[r] = srcImg.pixels[r2];
            destPixels[g] = srcImg.pixels[g2];
            destPixels[b] = srcImg.pixels[b2];
            destPixels[a] = srcImg.pixels[a];
          }
        }
      }
      return destPixels;
    }

    shiftRGB(srcImg) {

      let randR, randG, randB;
      let destPixels;
      let range;

      range = 16;
      destPixels = new Uint8ClampedArray(srcImg.pixels);
      randR = (myp5.floor(myp5.random(-range, range)) * srcImg.width + myp5.floor(myp5.random(-range, range))) * this.channelLen;
      randG = (myp5.floor(myp5.random(-range, range)) * srcImg.width + myp5.floor(myp5.random(-range, range))) * this.channelLen;
      randB = (myp5.floor(myp5.random(-range, range)) * srcImg.width + myp5.floor(myp5.random(-range, range))) * this.channelLen;

      for (let y = 0; y < srcImg.height; y++) {
        for (let x = 0; x < srcImg.width; x++) {
          let r, g, b, a;
          let r2, g2, b2, a2;
          let index;

          index = (y * srcImg.width + x) * this.channelLen;
          r = index;
          g = index + 1;
          b = index + 2;
          a = index + 3;
          r2 = (r + randR) % srcImg.pixels.length;
          g2 = (g + randG) % srcImg.pixels.length;
          b2 = (b + randB) % srcImg.pixels.length;
          destPixels[r] = srcImg.pixels[r2];
          destPixels[g] = srcImg.pixels[g2];
          destPixels[b] = srcImg.pixels[b2];
          destPixels[a] = srcImg.pixels[a];
        }
      }

      return destPixels;
    }

    getRandomRectImg(srcImg) {
      let startX;
      let startY;
      let rectW;
      let rectH;
      let destImg;
      startX = myp5.floor(myp5.random(0, srcImg.width - 30));
      startY = myp5.floor(myp5.random(0, srcImg.height - 50));
      rectW = myp5.floor(myp5.random(30, srcImg.width - startX));
      rectH = myp5.floor(myp5.random(1, 50));
      destImg = srcImg.get(startX, startY, rectW, rectH);
      destImg.loadPixels();
      return destImg;
    }

    glitchEffect() {
      if (!this.throughFlag) {
        myp5.push();
        myp5.translate((myp5.width - this.imgOrigin.width) / 2, (myp5.height - this.imgOrigin.height) / 2);
        myp5.image(this.imgOrigin, 0, 0);
        myp5.pop();
        return;
      }

      // flow line
      this.flowLineImgs.forEach((v, i, arr) => {
        arr[i].pixels = this.flowLine(this.imgOrigin, v);
        if (arr[i].pixels) {
          this.replaceData(this.imgOrigin, arr[i].pixels);
        }
      })

      // shift line
      this.shiftLineImgs.forEach((v, i, arr) => {
        if (myp5.floor(myp5.random(100)) > 50) {
          arr[i] = this.shiftLine(this.imgOrigin);
          this.replaceData(this.imgOrigin, arr[i]);
        } else {
          if (arr[i]) {
            this.replaceData(this.imgOrigin, arr[i]);
          }
        }
      })

      // shift rgb
      this.shiftRGBs.forEach((v, i, arr) => {
        if (myp5.floor(myp5.random(100)) > 65) {
          arr[i] = this.shiftRGB(this.imgOrigin);
          this.replaceData(this.imgOrigin, arr[i]);
        }
      })

      myp5.push();
      myp5.translate((myp5.width - this.imgOrigin.width) / 2, (myp5.height - this.imgOrigin.height) / 10);
      myp5.image(this.imgOrigin, 0, 0);
      myp5.pop();

      // scat image
      this.scatImgs.forEach((obj) => {
        myp5.push();
        myp5.translate((myp5.width - this.imgOrigin.width) / 2, (myp5.height - this.imgOrigin.height) / 2);
        if (myp5.floor(myp5.random(100)) > 80) {
          obj.x = myp5.floor(myp5.random(-this.imgOrigin.width * 0.3, this.imgOrigin.width * 0.7));
          obj.y = myp5.floor(myp5.random(-this.imgOrigin.height * 0.1, this.imgOrigin.height));
          obj.img = this.getRandomRectImg(this.imgOrigin);
        }
        if (obj.img) {
          myp5.image(obj.img, obj.x, obj.y);
        }
        myp5.pop();
      })
    }

    changeImage(imgName) {
      let _this = this;
        let imgSrc = 'https://medias.games2gether.com/endless-dungeon/' + imgName + '.png';
      myp5.loadImage(imgSrc, function (img) {
        _this.imgOrigin = img;
        _this.imgOrigin.loadPixels();
        _this.copyData = new Uint8ClampedArray(_this.imgOrigin.pixels);
      });
      this.show();
    }

    show() {
      this.replaceData(this.imgOrigin, this.copyData);
      myp5.image(this.imgOrigin, 0, 0);
      if (this.startGlitch) {
        this.glitchEffect();
      }
    }

    stopGlitch() {
      myp5.clear();
      this.replaceData(this.imgOrigin, this.copyData);
      myp5.image(this.imgOrigin, 0, 0);
    }
  }
}